<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/list/list.css" />
    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>简单列表</h2>
                <p>下面是简单不分页的列表。自定义了 onLoad 回调函数，指定了请求参数，并且提供自定义的 item HTML。</p>
                <div class="list">
                    <aj-list class="aj-article-list" ref="list1" api-url="https://api.apiopen.top/getWangYiNews"
                        :is-page="false" :on-load="onDataLoad" :init-base-param="{count:3}">
                        <template slot-scope="item">
                            <div class="thumb">
                                <img :src="item.image" />
                            </div>
                            <a :href="item.path" target="_blank">
                                <h3> {{item.title}}</h3>
                            </a>
                            <p>{{item.title}}{{item.title}}</p>
                        </template>
                    </aj-list>
                    <p>下面是更简单的的列表。</p>
                    <aj-list class="simpleList" ref="list2" api-url="https://api.apiopen.top/getWangYiNews" :is-page="false" :on-load="onDataLoad2">
                        <a slot-scope="item" :href="item.path" target="_blank">{{item.title}}</a>
                    </aj-list>
                </div>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/base/aj.js"></script>
    <script src="../../dist/base/xhr.js"></script>
    <script src="../../dist/list/list.js"></script>
    <script>
        VUE = new Vue({
            el: '.list',
            methods: {
                onDataLoad2(j) {
                   if(j.code === 200) 
                    this.$refs.list1.result = j.result;
                },
                onDataLoad2(j) {
                   if(j.code === 200) 
                    this.$refs.list2.result = j.result;
                }
            }
        });
    </script>
</body>

</html>